import { ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
import { CommonEvent } from '@tarojs/components/types/common'
import { AtList, AtListItem, AtInput, AtRadio, AtCheckbox } from 'taro-ui'
import { View, Picker } from '@tarojs/components'
// import createAtInput from '../../components/common-form'
// import DocsHeader from '../../components/doc-header';

type SelectionProps = {
  option: string[]
  value: number
  linkage?: number
}

type CommonInputProps = {
  title: string
  name?: string
  placeholder?: string
  value: string
  onChange: (event: CommonEvent) => any
}

interface IndexState {
  relations: number[]
  relationStr: string
  patientSex: SelectionProps
  censusRegister: SelectionProps
  patientBirthday: string
  patientName: CommonInputProps
  childrenOrder: number // 第几个小孩
  childrenTotal: number // 总共有几个小孩
  patientBloodType: SelectionProps // 血型
  fatherBloodType: SelectionProps // 血型
  motherBloodType: SelectionProps // 血型
  disease: SelectionProps // 疾病名称
  lastHospital: string // 上一家医院
}

class Index extends Component {

  public state: IndexState = {
    relations: [],
    relationStr: '',
    patientSex: {
      option: ['请选择', '男', '女', '其他'],
      value: 0
    },
    patientBirthday: '',
    patientName: {
      title: '患儿姓名',
      value: '',
      onChange: (e) => {
        console.log('patientName change', e)
        this.handleInputChange.bind(this, 'patientName')
      }
    },

    // 户口状态
    censusRegister: {
      option: ['请选择', '和爸爸在一起', '和妈妈在一起', '和父母在一起', '和父母都不在一起', '无户口'],
      value: 0
    },
    childrenOrder: 0,
    childrenTotal: 0,
    patientBloodType: {
      option: ['请选择', 'A型', 'AB型', 'B型', 'O型', '不详'],
      value: 0
    },
    fatherBloodType: {
      option: ['请选择', 'A型', 'AB型', 'B型', 'O型', '不详'],
      value: 0
    },
    motherBloodType: {
      option: ['请选择', 'A型', 'AB型', 'B型', 'O型', '不详'],
      value: 0
    },
    disease: {
      option: [
        '请选择',
        '先天性胆道闭锁（葛西术后）', // ——如果选择这个选项的话会要求录入手术时间
        '先天性胆道闭锁（未做葛西）',
        '胆汁淤积性肝病',
        '阿拉基综合征（Alagille综合征）',
        '进行性家族性肝内胆汁淤积症（PFIC）',
        '肝豆状核变性',
        '糖原累积症',
        '胆汁酸合成障碍',
        '酪氨酸血症',
        '高同型半胱氨酸血症',
        '丙酸血症',
        '尿素循环障碍性疾病',
        '原发性高草酸尿症',
        '枫糖尿症',
        '自身免疫性肝炎',
        '病毒性肝炎',
        '肝母细胞瘤',
        '先天性肝纤维化',
        '自定义'
      ],
      value: 0
    },
    lastHospital: '', // 上一家医院
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '基本信息'
  }

  createAtInput(parms: CommonInputProps) {

    const {
      title,
      name = title,
      placeholder = '请输入',
      value,
      onChange
    } = parms;

    return (
      <AtInput
        name={name}
        title={title}
        type='text'
        className='list-items__input'
        placeholder={placeholder}
        placeholderClass='list-items__placeholder'
        value={value}
        onChange={onChange}
      />
    )
  }

  /* 通用单选类型的问题 handle */
  private handleSelectionChange = (type: string, e: CommonEvent): void => {
    this.setState({
      [type]: {
        option: this.state[type].option,
        value: e.detail.value
      }
    })
  }

  /* 通用日期类型的问题 handle */
  private handleDateSelectionChange = (type: string, e: CommonEvent): void => {
    this.setState({
      [type]: e.detail.value
    })
  }

  /* 通用输入类型的问题 handle */
  private handleInputChange = (type: string, value: string): void => {
    console.log('handleInputChange', type, value)
    this.setState({
      [type]: value
    })
  }

  /* 联动类型 */
  private handleRelationChange = (e: []): void => {
    console.log('CommonEvent', e)
    /* 把新的取出来 */
    const b = this.state.relations
    const sb = new Set(b);
    const minus = e.filter(x => !sb.has(x));
    console.log(minus)
    this.setState({
      relation: minus[0],
      relations: minus
    })
  }

  render () {
    const {
      patientName,
      relations,
      relationStr,
      patientSex,
      patientBirthday,
      censusRegister,
    } = this.state

    return (
      <View className='page'>
        {/* <DocsHeader title='基本信息（未移植）' /> */}
        
        <View className='doc-body'>
          {/* 您与患儿的关系 */}
          <View className='panel'>
            <View className='panel__title'>您与患儿的关系</View>
            <View className='panel__content no-padding'>
              <View className='list-items'>
                <AtList>
                  <AtCheckbox
                    options={[
                      { label: '父亲', value: 1 },
                      { label: '母亲', value: 2 },
                      { label: '其他', value: 3 }
                    ]}
                    selectedList={relations}
                    onChange={this.handleRelationChange.bind(this)}
                  />
                  {
                    relations[0] === 3 ? 
                      <AtInput
                        name='value'
                        type='text'
                        placeholder='请在这里输入您与患儿的关系'
                        value={relationStr}
                        onChange={this.handleInputChange.bind(this, 'patientName')}
                      /> : null
                  }
                </AtList>
              </View>
            </View>
          </View>
          
          {/* 患儿基本信息 */}
          <View className='panel'>
            <View className='panel__title'>患儿基本信息</View>
            <View className='panel__content no-padding'>
              <View className='list-items'>
                <AtList>
                  {/* 患儿姓名 */}
                  {this.createAtInput(patientName)}
                  {/* 患儿性别 */}
                  <Picker mode='selector' range={patientSex.option}
                    value={patientSex.value}
                    className='list-items__picker'
                    onChange={this.handleSelectionChange.bind(this, 'patientSex')}
                  >
                    <AtListItem 
                      title='患儿性别' 
                      className='list-items__text'
                      extraText={patientSex.option[patientSex.value]} 
                    />
                  </Picker>
                  {/* 患儿出生日期 */}
                  <Picker mode='date' 
                    value={patientBirthday}
                    className='list-items__picker'
                    onChange={this.handleDateSelectionChange.bind(this, 'patientBirthday')}
                  >
                    <AtListItem 
                      title='患儿出生日期' 
                      className='list-items__text'
                      extraText={patientBirthday ? patientBirthday : '请选择'} 
                    />
                  </Picker>
                </AtList>
              </View>
            </View>
          </View>
          {/* 患儿家庭情况 */}
          <View className='panel'>
            <View className='panel__title'>患儿家庭情况</View>
            <View className='panel__content no-padding'>
              <View className='list-items'>
                <AtList>
                  <Picker mode='selector' range={censusRegister.option}
                    value={censusRegister.value}
                    onChange={this.handleSelectionChange.bind(this, 'censusRegister')}
                  >
                    <AtListItem title='患儿户口状态' extraText={censusRegister.option[censusRegister.value]} />
                  </Picker>
                  {/* 患儿是家庭第几个孩子 */}
                  <AtInput
                    name='value'
                    title='患儿是家庭第几个孩子'
                    type='text'
                    className='list-items-input'
                    placeholder='请输入'
                    placeholderStyle='text-align: right;'
                    value={patientName}
                    onChange={this.handleInputChange.bind(this, 'patientName')}
                  />
                  <AtInput
                    name='value'
                    title='患儿家庭共几个孩子'
                    type='text'
                    className='list-items-input'
                    placeholder='请输入'
                    placeholderStyle='text-align: right;'
                    value={patientName}
                    onChange={this.handleInputChange.bind(this, 'patientName')}
                  />
                </AtList>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps, PageState>
